<template>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 8px">
    <el-breadcrumb-item>系统管理</el-breadcrumb-item>
    <el-breadcrumb-item>借阅量查询</el-breadcrumb-item>
  </el-breadcrumb>
  <div ref="chartRef" style="width: 100%; height: 400px"></div>
  <div ref="chartDom" style="width: 100%; height: 400px; margin-top: 50px"></div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import * as echarts from "echarts";
import { getBorrowTypeData, getBorrowData } from "../../api/api";
// 使用 ref 创建 DOM 引用
const chartRef = ref(null);
const chartDom = ref(null);
// 折线图配置项
const option = reactive({
  title: {
    text: "借阅图书量统计",
    left: "center",
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [100, 20, 0, 0, 0, 1330, 1320],
      type: "line",
      areaStyle: {},
    },
  ],
});

const option1 = reactive({
  title: {
    text: "借阅图书类型统计",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: "50%",
      data: [
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
});

let myChart;
let myChart1;
// 在 DOM 挂载后初始化 ECharts
onMounted(() => {
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value);
    myChart.setOption(option);
  }
  if (chartDom.value) {
    myChart1 = echarts.init(chartDom.value);
    myChart1.setOption(option1);
  }
  getbing();
  getzhexian();
});

//饼图数据
const getbing = () => {
  getBorrowTypeData()
    .then(res => {
      option1.series[0].data = Array.from(res.data);
      console.log(option1.series.data);
      myChart1.setOption(option1); // 重新渲染饼图
      ElMessage({
        message: "获取借阅类型信息成功",
        type: "success",
      });
    })
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("获取借阅类型信息失败");
    });
};
//折线图数据
const getzhexian = () => {
  getBorrowData()
    .then(res => {
      if (res.data != null) {
        option.xAxis.data = Array.from(res.data.borrowDates);
        option.series[0].data = Array.from(res.data.borrowNumber);
        console.log(option.xAxis.data);
        console.log(option.series.data);
        myChart.setOption(option);
      }
      // 重新渲染折线图
      ElMessage({
        message: "获取借阅量成功",
        type: "success",
      });
    })
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("获取借阅量失败");
    });
};
</script>
